<template>
    <div class="payAdd">
        <div class="payAddHead">
            <div class="payLeft"><button>缴费信息详情</button></div>
            <div class="payRight"></div>
        </div>
        <el-form :model="form" ref="ruleForm" label-width="200px" class="demo-ruleForm" style="margin-top: 20px;">
            <el-form-item label="缴费产品" prop="payname">
                <el-input v-model="form.payname" disabled></el-input>
            </el-form-item>
            <el-form-item label="缴费人员" prop="username">
                <el-input v-model="form.username" style="margin-right: 120px;" disabled></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-form-item label="缴费金额" prop="paymoney">
                <el-input v-model="form.paymoney" disabled></el-input>
            </el-form-item>
            <el-form-item label="缴费优先级" prop="paylevel">
                <el-input v-model="form.paylevel" style="margin-right: 120px;" disabled></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-form-item label="支付时间" prop="paytime">
                <el-input v-model="form.paytime" disabled></el-input>
            </el-form-item>
            <el-form-item label="支付状态" prop="paystatus">
                <el-input v-model="form.paystatus" style="margin-right: 120px;" disabled></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-form-item label="支付类型" prop="paytime">
                <img src="@/assets/images/zfb1.png" alt="" width="60px" style="margin: 10px;">
                <img src="@/assets/images/wx1.png" alt="" width="60px" style="margin: 10px;">
                <img src="@/assets/images/ysf.png" alt="" width="60px" style="margin: 10px;">
            </el-form-item>
        </el-form>
        <el-form :model="form" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-form-item label="回复内容" prop="paytime">
                <span>{{ form.costcontent }}</span>
            </el-form-item>
        </el-form>
        <div class="payAddFooter">
            <el-button type="primary" size="middle" @click="handleBack">返回</el-button>
        </div>
    </div>
</template>
<script>
export default {
    created() {
        console.log(JSON.parse(this.$route.query.value), 'detail');
        if (this.$route.query.value) {
            this.form = JSON.parse(this.$route.query.value)
        }
    },
    data() {
        return {
            form: {
                paystatus: 1,
                token: ''
            },
        }
    },
    methods: {
        handleBack() {
            // this.$router.push('/pay/payMessage')
            this.$router.go(-1)
        },
    }
}
</script>
<style lang="scss" scoped>
.payAdd {
    margin: 0.4% 0.2%;
    border: 1px solid #dcdfe6;

    .payAddHead {
        display: flex;

        .payLeft {
            button {
                width: 130px;
                border: 1px solid #dcdfe6;
                border-bottom: #fff;
                padding: 10px 20px;
                color: #409eff;
                background-color: #fff;

            }
        }

        .payRight {
            width: 100%;
            background-color: rgba(0, 0, 2, .03);
            border: 1px solid #dcdfe6;
            border-left: none;
        }
    }

    .el-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .el-input {
            width: 400px;
        }

        .el-select {
            width: 400px;
        }
    }

    .payAddFooter {
        width: 100px;
        position: absolute;
        right: 0;
        top: 300px;

        .el-button {
            padding: 10px 25px;
            margin: 10px 0;
        }
    }
}

::v-deep .el-form-item__content {
    display: flex;
}
</style>